
<template>
    <van-field
        :disabled="disabled"
        class="phone-field"
        autocomplete="off"
        type="tel"
        v-model="phone"
        :label="label"
        :placeholder="$st('Please_enter_phone')"
        :rules="[{ required: true, validator:validatorPhone , message:$st('wp_Please_fill_in_the_correct_mobile_number') }]">
        <template #label>
            <van-button
                icon="arrow-down"
                icon-position="right"
                class="country-button"
                type="text"
                @click="show=true">
                +{{nation_phone}}
            </van-button>
        </template>
        <template #button>
            <div
                class="codebtn"
                v-if="isCanSendCode"
                @click="onSendValidatecode">{{sendCodeMessage}}</div>
            <div
                class="codebtn resendcodebtn"
                v-else>
                {{$st('resend')+'('+second+')'}}
            </div>
        </template>
    </van-field>
    <van-action-sheet
        :title="$st('wp_Region_Selection')"
        v-model:show="show"
        closeable
        teleport="#app">
        <international-code
            v-model:country="country"
            v-model:countryTel="nation_phone"
            @selectCode="show=false"/>
    </van-action-sheet>
</template>

<script lang="js">
import { ref, reactive, toRefs, watch, onBeforeUnmount, onBeforeMount, computed } from 'vue';
import Cookies from 'js-cookie';
import RegConfig from '@/util/RegConfig';
import InternationalCode from '@/components/maintenance_control/repairreport/repaircommon/InternationalCode.vue';
export default {
    name: '',
    components: { InternationalCode },
    props: ['modelValue', 'label', 'sendCodeMessage', 'disabled'],
    emits: ['sendVcode'],
    setup (props, context) {
        const state = reactive({
            phone: props.modelValue,
            isCanSendCode: true,
            secondInterval: null,
            second: 60
        });
        const show = ref(false);
        const setCookies = function (second) {
            Cookies.set('updatepwd_state', 'wait');
            Cookies.set('updatepwd_s', second);
        };
        const validatorPhone = (value) => {
            return RegConfig.telphone.test(value);
        };
        const secondReduce = function () {
            state.secondInterval = setInterval(() => {
                state.second--;
                if (state.second <= 0) {
                    clearInterval(state.secondInterval);
                    state.isCanSendCode = true;
                    state.second = 60;
                } else {
                    state.isCanSendCode = false;
                    setCookies(state.second);
                }
            }, 1000);
        };
        const getAndSetSecond = function () {
            const sec = Cookies.get('updatepwd_s');
            const status = Cookies.get('updatepwd_state');
            if (!Number.isNaN(Number.parseInt(sec))) {
                Cookies.remove('updatepwd_s');
                Cookies.remove('updatepwd_state');

                if (status === 'wait') {
                    state.second = Number.parseInt(sec);
                    secondReduce();
                }
            } else {
                state.second = 60;
            }
        };
        const nation_phone = ref(86);
        const country = ref('China');
        const wholePhone = computed(() => {
            return country.value === 'China' ? state.phone : '00' + nation_phone.value + state.phone;
        });
        const onSendValidatecode = () => {
            if (state.phone) {
                context.emit('sendVcode', wholePhone.value);
                state.isCanSendCode = false;
                secondReduce();
            }
        };
        const modelflag = ref(true);
        watch(() => props.modelValue, (newVal, oldVal) => {
            if (modelflag.value) {
                state.phone = newVal;
                modelflag.value = false;
            }
        });
        watch(() => state.phone, (newVal, oldVal) => {
            // context.emit('update:modelValue', newVal);
            context.emit('update:modelValue', wholePhone.value);
        });
        watch(() => show.value, (newVal, oldVal) => {
            context.emit('update:modelValue', wholePhone.value);
        });
        onBeforeUnmount(() => {
            if (state.second < 60) {
                setCookies(state.second);
            }
            // clearInterval(state.secondInterval);
        });
        onBeforeMount(() => {
            getAndSetSecond();
        });
        return {
            onSendValidatecode,
            validatorPhone,
            nation_phone,
            country,
            wholePhone,
            show,
            setCookies,
            ...toRefs(state)
        };
    },
    methods: {
        selectInternationalCode () {
            this.$router.push({
                path: '/internationalcode',
                params: {
                    tel: this.nation_phone
                }
            });
        }
    }
};
</script>

<style lang="scss">
.phone-field{
     font-size: 17px;
     text-align: LEFT;
    .codebtn {
        color: #1890ff;
        border: 0 solid white;
        max-width: 39vw;
        text-align: center;
        font-size: 15px;
        padding-top: 6px;
        padding-bottom: 6px;
    }
    .resendcodebtn{
        color: #969799;
    }

    .van-field__label{
        width: 4.8em;
        align-items: center;
    }
    .country-button {
    width: 25px;
    height: 23px;
    border-style: none;
    font-size: 15px;
    text-align: LEFT;
    color: #000000;
    margin-left: 10px;

    background-color: white;
}
}

</style>
